<template>
  <div class="search-menu">
    <!--<i :class="'iconfont icon-sousuo'" class="toolBar-icon" @click="handleOpen"></i>-->
    <el-input ref="searchInputRef" placeholder="菜单搜索" :prefix-icon="Search" @focus="handleOpen" />
    <!--<el-autocomplete
      ref="menuInputRef"
      v-model="searchMenu"
      value-key="path"
      placeholder="菜单搜索 ：支持菜单名称、路径"
      @click.stop
    >
      <template #prefix>
        <el-icon>
          <Search />
        </el-icon>
      </template>
      <template #default="{ item }">
        <el-icon>
          <component :is="item.meta.icon"></component>
        </el-icon>
        <span> {{ item.meta.title }} </span>
      </template>
    </el-autocomplete>-->
    <el-dialog class="search-dialog" v-model="isShowSearch" :width="600" :show-close="false" top="10vh">
      <el-input
        v-model="searchMenu"
        ref="menuInputRef"
        placeholder="菜单搜索：支持菜单名称、路径"
        size="large"
        clearable
        :prefix-icon="Search"
      />
      <div v-if="searchList.length" class="menu-list" ref="menuListRef">
        <div
          v-for="item in searchList"
          :key="item.path"
          :class="['menu-item', { 'menu-active': item.path === activePath }]"
          @mouseenter="mouseoverMenuItem(item)"
          @click="handleClickMenu()"
        >
          <div class="menu-lf">
            <el-icon class="menu-icon">
              <component :is="item.meta.icon"></component>
            </el-icon>
            <span class="menu-title">{{ item.meta.title }}</span>
          </div>
          <i :class="'iconfont icon-huiche'" class="menu-enter" @click="handleOpen"></i>
        </div>
      </div>
      <template v-else-if="tagList.length">
        <main class="tag-main">
          <Tag v-for="item in tagList" :key="item.id" :data="item" @remove="removeMenuTag" @select="selectMenuTag" />
        </main>
        <footer class="tag-footer">
          <el-button link type="danger" @click="clearMenuTag">清除记录</el-button>
        </footer>
      </template>
      <template v-else>
        <el-empty :image-size="100" description="暂无搜索记录" />
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick, watch, onMounted } from 'vue'
import { InputInstance } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useRouter } from 'vue-router'
import { useDebounceFn } from '@vueuse/core'
import Tag from '@/components/Tag/index.vue'

const router = useRouter()
const authStore = useAuthStore()
const menuList = computed(() => authStore.flatMenuListGet.filter(item => !item.meta.isHide))

const activePath = ref('')
const mouseoverMenuItem = (menu: Menu.MenuOptions) => {
  activePath.value = menu.path
}

const menuInputRef = ref<InputInstance | null>(null)
const isShowSearch = ref<boolean>(false)
const searchMenu = ref<string>('')

watch(isShowSearch, val => {
  if (val) {
    document.addEventListener('keydown', keyboardOperation)
  } else {
    document.removeEventListener('keydown', keyboardOperation)
  }
})

const searchInputRef = ref<InputInstance | null>(null)
const handleOpen = () => {
  isShowSearch.value = true
  searchInputRef.value?.blur()
  nextTick(() => {
    setTimeout(() => {
      menuInputRef.value?.focus()
    })
  })
}

const searchList = ref<Menu.MenuOptions[]>([])
const updateSearchList = () => {
  searchList.value = searchMenu.value
    ? menuList.value.filter(
        item =>
          (item.path.toLowerCase().includes(searchMenu.value.toLowerCase()) ||
            item.meta.title.toLowerCase().includes(searchMenu.value.toLowerCase())) &&
          !item.meta?.isHide
      )
    : []
  activePath.value = searchList.value.length ? searchList.value[0].path : ''
}

const debouncedUpdateSearchList = useDebounceFn(updateSearchList, 300)

/**
 * 键盘操作
 */
watch(searchMenu, debouncedUpdateSearchList)
const menuListRef = ref<Element | null>(null)
const keyPressUpOrDown = (direction: number) => {
  const length = searchList.value.length
  if (length === 0) return
  const index = searchList.value.findIndex(item => item.path === activePath.value)
  const newIndex = (index + direction + length) % length
  activePath.value = searchList.value[newIndex].path
  nextTick(() => {
    if (!menuListRef.value?.firstElementChild) return
    const menuItemHeight = menuListRef.value.firstElementChild.clientHeight + 12 || 0
    menuListRef.value.scrollTop = newIndex * menuItemHeight
  })
}
const keyboardOperation = (event: KeyboardEvent) => {
  if (event.key === 'ArrowUp') {
    event.preventDefault()
    keyPressUpOrDown(-1)
  } else if (event.key === 'ArrowDown') {
    event.preventDefault()
    keyPressUpOrDown(1)
  } else if (event.key === 'Enter') {
    event.preventDefault()
    handleClickMenu()
  }
}
const handleClickMenu = () => {
  const menu = searchList.value.find(item => item.path === activePath.value)
  if (!menu) return
  if (menu.meta?.isLink) window.open(menu.meta.isLink, '_blank')
  else router.push(menu.path)
  searchMenu.value = ''
  isShowSearch.value = false
}

/**
 * 模拟菜单标签
 */
let tagList = ref([
  { id: 1, name: '生产计划', path: 'dispatch/planList' },
  { id: 2, name: '首页', path: '/home/index' },
  { id: 3, name: 'name3', path: '/path3' },
  { id: 4, name: 'name4', path: '/path4' },
  { id: 5, name: 'name5', path: '/path5' },
  { id: 6, name: 'name6', path: '/path6' },
  { id: 7, name: 'name7', path: '/path7' },
  { id: 8, name: 'name8', path: '/path8' },
  { id: 9, name: 'name9', path: '/path9' },
  { id: 10, name: 'name10', path: '/path10' }
])
const removeMenuTag = (tag: any) => {
  tagList.value = tagList.value.filter(item => item.id !== tag.id)
}
const selectMenuTag = (tag: any) => {
  searchMenu.value = tag.name
  // router.push(tag.path)
}
const clearMenuTag = () => {
  tagList.value = []
}

onMounted(() => {
  console.log('调用')
})
</script>

<style scoped lang="scss">
.search-menu {
  :deep(.el-dialog) {
    border-radius: 4px;
    .el-dialog__header {
      display: none;
    }
  }
  .menu-list {
    max-height: 515px;
    margin-top: 15px;
    overflow: auto;
    .menu-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 45px;
      padding: 0 20px;
      margin: 10px 0;
      color: var(--el-text-color-secondary);
      cursor: pointer;
      background-color: transparent;
      border: 1px solid var(--el-border-color);
      border-radius: 6px;
      transition: all 0.2s ease;
      .menu-lf {
        display: flex;
        align-items: center;
      }
      .menu-icon {
        margin-right: 8px;
        font-size: 16px;
      }
      .menu-title {
        font-size: 14px;
      }
      .menu-enter {
        font-size: 17px;
      }
    }
    .menu-active {
      color: #ffffff;
      background-color: var(--el-color-primary);
      .menu-icon {
        font-size: 18px;
      }
      .menu-title {
        font-size: 16px;
      }
      .menu-enter {
        font-size: 19px;
      }
    }
  }
  .tag-main {
    display: flex;
    flex-wrap: wrap;
    margin: var(--margin-default) 0;
    .my-tag {
      margin-right: var(--margin-default);
      margin-bottom: var(--margin-default);
    }
  }
  .tag-footer {
    text-align: right;
  }
}
</style>
